<template>
  <div
    @mouseenter="show_btn"
    @mouseleave="hide_btn"
    class="item-main-body"
  >
    <div class="item-date">
      <h1 style="text-align: center; font-size: 42px">{{ item_date.day }}</h1>
      <hr style="margin: 5px 0px" />
      <p style="font-size: 14px">{{ item_date.mouth }}/{{ item_date.year }}</p>
    </div>
    <div class="img-coutiner">
      <div class="item-img">
        <img :src="item_imgurl" />
      </div>
      <div class="text-coutiner">
        <div>
          <p style="margin-top: 5px">{{ item_author }} | {{ item_title }}</p>
          <p style="margin-top: 10px; color: #666666">{{ item_profile }}</p>
        </div>
        <el-button v-show="is_show" style="height: 40px" type="warning"
          >详情-></el-button
        >
      </div>
      <hr style="background-color: #f0f0f0" />
    </div>
  </div>
</template>

<script>
export default {
  name: "AchievementItem",
  props: {
    item_date: Object,
    item_imgurl: String,
    item_author: String,
    item_title: String,
    item_profile: String,
  },
  data: function () {
    return {
      is_show: false,
    };
  },
  methods: {
    show_btn() {
      this.is_show = true;
    },
    hide_btn() {
      this.is_show = false;
    },
  },
};
</script>

<style>
.item-main-body {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}
.item-main-body:hover .item-img {
  height: 250px;
  transition: all 0.8s linear;
}
.item-date {
  display: flex;
  flex-direction: column;
}
.img-coutiner {
  width: 100%;
  margin: 0px 10px;
  display: flex;
  flex-direction: column;
}
.item-date h1 {
  color: black;
}
.item-img {
  width: 100%;
  height: 0px;
  overflow: hidden;
  object-fit: fill;
  transition: all 0.8s linear;
}
.item-img img {
  width: 100%;
  height: 100%;
}
.text-coutiner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 90px;
  align-items: center;
}
</style>